import Vue from 'vue'
<template>
   <div>
    <a-list
            class="comment-list"
            :header="`${userComment.length} 评价`"
            item-layout="horizontal"
            :data-source="displayedComment"
    >
        <a-list-item  class="comment-item" slot="renderItem" slot-scope="item">
            <a-comment  :author="'匿名用户'" :avatar="item.avatar">

                <template slot="actions">
                    <span>{{"评分： "+item.rate}}</span>
                </template>
                <p slot="content">
                    {{ item.commentDetail }}
                </p>
                <a-tooltip slot="datetime" :title="item.datetime">
                    <span>{{ item.datetime}}</span>
                </a-tooltip>
            </a-comment>
        </a-list-item>
    </a-list>
   </div>
</template>

<script>
//评分数据目前还不完全
    import {mapGetters} from "vuex";
    import Vue from 'vue'
    import userComment from "../../user/userComment";

    export default {
        name: "userReview",
        data() {
            return {
                data: {
                }
            };
        },
        computed: {
            ...mapGetters([
                'userComment',
            ]),
            displayedComment(){
                let displaycomment=this.userComment;
                displaycomment.forEach(function (res) {      //循环向 a里面的每一个数据添加一个名为aa值为0的新属性
                    Vue.set(res, 'avatar', 'https://cse2020-dune.oss-cn-shanghai.aliyuncs.com/20200624202834.png')
                })
                return displaycomment
            }
        },
    }
</script>

<style scoped>
.comment-list{
    /*padding: 14px;*/
    max-height:400px;
    overflow-y:scroll;
    border: 0;
    border-radius: 6px;
    margin-right: 60px;
    margin-left: 20px;
    margin-top: 10px;
}
    .comment-item{
        padding: 0px 20px 0px 20px;
        background: #F9F8F6;
        margin-bottom: 20px;
    }
</style>
